// 页面切换动画
.fade-transform-enter-active,
.fade-transform-leave-active {
  transition: all $animation-duration-base;
}

.fade-transform-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

// 淡入淡出
.fade-enter-active,
.fade-leave-active {
  transition: opacity $animation-duration-base;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

// 缩放
.scale-enter-active,
.scale-leave-active {
  transition: all $animation-duration-base;
}

.scale-enter-from,
.scale-leave-to {
  opacity: 0;
  transform: scale(0.9);
}

// 滑动
.slide-enter-active,
.slide-leave-active {
  transition: all $animation-duration-base;
}

.slide-enter-from {
  opacity: 0;
  transform: translateY(-30px);
}

.slide-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

// 抽屉
.drawer-enter-active,
.drawer-leave-active {
  transition: all $animation-duration-base;
}

.drawer-enter-from {
  transform: translate(100%, 0);
}

.drawer-leave-to {
  transform: translate(100%, 0);
}

// 列表过渡
.list-enter-active,
.list-leave-active {
  transition: all $animation-duration-base;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

// 折叠面板
.collapse-transition {
  transition: $animation-duration-base height ease-in-out,
              $animation-duration-base padding-top ease-in-out,
              $animation-duration-base padding-bottom ease-in-out;
} 